<template>
  <div>
  <el-table :data="order" style="width: 100%">
    <el-table-column label="订单编号" width="180">
      <template slot-scope="scope">
        <i class="el-icon-time"></i>
        <span style="margin-left: 10px">{{ scope.row.id }}</span>
      </template>
    </el-table-column>
    <el-table-column label="商品名" width="180">
      <template slot-scope="scope">
        <div slot="reference" class="name-wrapper">
          {{ scope.row.goodsName }}
        </div>
        </el-popover>
      </template>
    </el-table-column>
    <el-table-column label="状态" width="180">
      <template slot-scope="scope">
        <div slot="reference" class="name-wrapper">
          <span v-if="scope.row.state==1">付款</span>
          <span v-if="scope.row.state==2">发货</span>
          <span v-if="scope.row.state==3">签收</span>
        </div>
        </el-popover>
      </template>
    </el-table-column>
    <el-table-column label="操作">
      <template slot-scope="scope">
        <el-button size="mini" @click="getOrderDetail(scope.row.id)">查看详情</el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-dialog title="订单详情" :visible.sync="dialogFormVisible">
    <el-form :model="orderDetail">
      <el-form-item label="商品名" :label-width="formLabelWidth">
        <el-input v-model="orderDetail.goodsName" autocomplete="off" :disabled="true"></el-input>
      </el-form-item>
     <el-form-item label="订单编号" :label-width="formLabelWidth">
       <el-input v-model="orderDetail.id" autocomplete="off" :disabled="true"></el-input>
     </el-form-item>
     <el-form-item label="收货人" :label-width="formLabelWidth">
       <el-input v-model="orderDetail.customerId" autocomplete="off" :disabled="true"></el-input>
     </el-form-item>
     <el-form-item label="联系方式" :label-width="formLabelWidth">
       <el-input v-model="orderDetail.tel" autocomplete="off" :disabled="true"></el-input>
     </el-form-item>
     <el-form-item label="收货地址" :label-width="formLabelWidth">
       <el-input v-model="orderDetail.address" autocomplete="off" :disabled="true"></el-input>
     </el-form-item>
     <el-form-item label="订单金额" :label-width="formLabelWidth">
       <el-input v-model="orderDetail.price" autocomplete="off" :disabled="true"></el-input>
     </el-form-item>
     <el-form-item label="购买时间" :label-width="formLabelWidth">
       <el-input v-model="orderDetail.time" autocomplete="off" :disabled="true"></el-input>
     </el-form-item>
     <el-form-item label="物流信息" :label-width="formLabelWidth">
       <el-input v-model="orderDetail.summary" autocomplete="off"></el-input>
     </el-form-item>
    </el-form>
    <el-steps :active="orderDetail.state" simple>
      <el-step title="已付款" icon="el-icon-edit"></el-step>
      <el-step title="已发货" icon="el-icon-upload"></el-step>
      <el-step title="签收" icon="el-icon-picture"></el-step>
    </el-steps>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogFormVisible = false">取 消</el-button>
      <el-button type="primary" @click="deliverGoods">修改物流</el-button>
    </div>
  </el-dialog>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        order: [],
        dialogFormVisible: false,
        orderDetail:'',
        formLabelWidth: '120px'
      }
    },
    mounted: function() {
      this.loadOrder()
    },
    methods: {
      loadOrder() {
        this.$axios.get('/getListOrder',).then(resp => {
          this.order = resp.data
        })
      },
      getOrderDetail(key){
        this.$axios.post('/orderDetail',{
          id:key
        }).then(resp => {
          this.orderDetail = resp.data
           this.dialogFormVisible=true
        })
      },
      deliverGoods(){
        this.$axios.post('/deliverGoods',{
          id:this.orderDetail.id,
          summary:this.orderDetail.summary
        }).then(resp=>{
          if(resp.data.code===200){
            dialogFormVisible = false
            alert("修改成功")
          }
         else alert("请稍后再更新物流信息")

        })
      }
    }
  }
</script>
<style>
</style>
